import { t } from 'i18next'
import React, { useEffect, useState } from 'react'
import { Search } from '@kedacom/react-next'
import { StyledMemberList } from './style'
import { Draggable } from '@/plugins/dnd'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
import { useDebounceEffect } from 'ahooks'
import { ListItem } from './listItem'
import { useMccStore } from '@/pages/manager/store'
import { ItemData, useMemberListStore } from './store'
import shallow from 'zustand/shallow'
import { IconTips } from '@/components/List/ListEmpty/style'
import { ListItemGhost } from '@/pages/manager/components'
import { revert_mt } from '@/api/manager/mt'
import { revert_meeting } from '@/api/manager/meeting'
import { useTableAllStore } from '../../main/table/all/store'
import { useTableInteractiveStore } from '../../main/table/interactive/store'
import { useParamsStore } from '../../main/store'
import { useVmpTypeStore } from '../store.get'

interface RowRendererProps extends ListChildComponentProps {
	data: ItemData[]
}
const rowRenderer = React.memo(({ data, index, style }: RowRendererProps) => {
	const rowData = data[index]
	const useStore = useVmpTypeStore((state) => state.getStore())
	const canDrag = useStore((state) => (!state._isStart || state._isEdit) && state.data.mode === 1)
	const dataTransfer = () => {
		return {
			data: rowData.mcc.isMt ? revert_mt(rowData.mcc) : revert_meeting(rowData.mcc),
			from: 'userItem',
		}
	}
	return (
		<Draggable
			//非本级会议可拖拽
			canDrag={canDrag && rowData.mtKey !== '0.0.0.0_0'}
			dataTransfer={dataTransfer}
			ghostRender={<ListItemGhost data={rowData.mcc} />}
			style={style}
		>
			<ListItem {...rowData} />
		</Draggable>
	)
})
/**
 * 会控终端列表组件
 */
export default function MemberList() {
	const useStore = useVmpTypeStore((state) => state.getStore())
	const canDrag = useStore((state) => (!state._isStart || state._isEdit) && state.data.mode === 1)
	const superMtNum = useMccStore((state) => state.mccInfo.superMtNum)
	const [searchVal, setSearchVal] = useState('')
	const [actualSearchVal, setActualSearchVal] = useState('')
	const handleSearch = (val: string) => {
		setSearchVal(val)
	}
	useDebounceEffect(
		() => {
			setActualSearchVal(searchVal)
		},
		[searchVal],
		{
			wait: 250,
		}
	)
	const tableAll = useTableAllStore((state) => state.tree)
	const tableInteractive = useTableInteractiveStore((state) => state.list)
	const tab = useParamsStore((state) => state.tab)
	const { list, getListFromTableAll, getListFromTable } = useMemberListStore(
		(state) => ({
			list: state.list,
			getListFromTableAll: state.getListFromTableAll,
			getListFromTable: state.getListFromTable,
		}),
		shallow
	)
	useEffect(() => {
		if (superMtNum === 0) {
			getListFromTableAll(tableAll, actualSearchVal)
		}
	}, [tableAll, actualSearchVal, superMtNum])
	useEffect(() => {
		if (superMtNum === 1) {
			getListFromTable(tableInteractive, actualSearchVal)
		}
	}, [tableInteractive, actualSearchVal, superMtNum])
	return (
		<StyledMemberList className="member-list-wrap">
			{superMtNum === 0 ? (
				<div className="top-size">
					{t('全部终端')}
					<span>
						{tab.all.onlineSize}/{tab.all.size}
					</span>
				</div>
			) : (
				<div className="top-size">
					{t('互动终端')}
					<span>
						{tab.interactive.onlineSize}/{tab.interactive.size}
					</span>
				</div>
			)}
			<Search
				className="search"
				iconAlign="left"
				placeholder={t('搜索与会方')}
				value={searchVal}
				onChange={(e, v) => handleSearch(v)}
				onClear={() => handleSearch('')}
				clearable
			></Search>
			<div className="member-list">
				<AutoSizer>
					{({ width, height }) => {
						return (
							<List
								width={width}
								height={height}
								itemCount={list.length}
								itemSize={38}
								itemData={list}
								itemKey={(index, data) => data[index].mtKey}
							>
								{rowRenderer}
							</List>
						)
					}}
				</AutoSizer>
			</div>
			<span className="tip">
				{canDrag && (
					<>
						<IconTips className="icon-tips" />
						<span className="tip_text">{t('请拖拽与会方至指定的画面中')}</span>
					</>
				)}
			</span>
		</StyledMemberList>
	)
}
